<template>
  <div class="righttop" ref="charts"></div>
</template>

<script>
import echarts from "echarts"; //   npm install echarts@4.9.0
export default {
  name: "",
  data() {
    return {
      myChart: "",
      className: className,
      optionData: optionData,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.mycharts();
    });
  },
  props: {
    optionData: {
      type: Array,
      require: true,
    },
    className: {
      type: Array,
      require: true,
    }
  },
  methods: {
    mycharts() {
      let myChart = echarts.init(this.$refs.charts, "macarons");
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["未打卡", "已打卡"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.className,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.optionData,
      });
      //让图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
  },
};
</script>

<style scoped>
.righttop {
  width: 100%;
  height: 400px;
  background: rgb(14, 51, 129);
}
</style>
